<template>
    <div class="bodyBox">
		<el-form ref="actionform" :model="formData" label-width="80px" v-loading="showLoading">
			<div class="flex-between" style="align-items: flex-start;">
				<div class="flex_1">
					<el-form-item label="主题风格" verify prop="campaignStyle">
						<el-input class="formItem" v-model="formData.campaignStyle" placeholder="活动主题风格"></el-input>
					</el-form-item>
					<el-form-item label="内容描述" prop="campaignContentDesc" verify>
						<el-input
							class="formItem"
							type="textarea"
							:rows="4"
							v-model="formData.campaignContentDesc"
							maxlength="100"
							placeholder="请输入活动模板内容描述 (长度不超过100)"></el-input>
					</el-form-item>
					<el-form-item label="主题色" verify prop="campaignBackgroundColor">
						<el-color-picker v-model="formData.campaignBackgroundColor" show-alpha></el-color-picker>
					</el-form-item>
					<el-form-item label="活动主图" prop="campaignMainImageUrl" verify>
						<el-upload
							:action="uploadUrl"
							:data="access_token"
							:show-file-list="false"
							:before-upload="beforeUpload"
							:on-success="uploadMainImageSuccess"
							list-type="picture"
						>
							<el-image :src="formData.campaignMainImageUrl" class="avatar" v-if="formData.campaignMainImageUrl" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							<el-input class="inputs none imgArea"></el-input>
						</el-upload>
					</el-form-item>
					<el-form-item label="倒计时颜色" verify prop="campaignCountdownColor">
						<el-color-picker v-model="formData.campaignCountdownColor" show-alpha></el-color-picker>
					</el-form-item>
					<el-form-item label="我的奖品" verify prop="campaignMyAwardBtnUrl">
						<el-upload
							:action="uploadUrl"
							:data="access_token"
							:show-file-list="false"
							:before-upload="beforeUpload"
							:on-success="uploadMyAwardBtnSuccess"
							list-type="picture"
						>
							<el-image :src="formData.campaignMyAwardBtnUrl" class="avatar" v-if="formData.campaignMyAwardBtnUrl" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							<el-input class="inputs none imgArea"></el-input>
						</el-upload>
					</el-form-item>
					<el-form-item label="说明图" verify prop="campaignExplainImageUrl">
						<el-upload
							:action="uploadUrl"
							:data="access_token"
							:show-file-list="false"
							:before-upload="beforeUpload"
							:on-success="uploadExplainImageSuccess"
							list-type="picture"
						>
							<el-image :src="formData.campaignExplainImageUrl" class="avatar" v-if="formData.campaignExplainImageUrl" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							<el-input class="inputs none imgArea"></el-input>
						</el-upload>
					</el-form-item>
					<el-form-item label="立即赠送小按钮" prop="campaignSmallSendBtnUrl" verify>
						<el-upload
							:action="uploadUrl"
							:data="access_token"
							:show-file-list="false"
							:before-upload="beforeUpload"
							:on-success="uploadSmallSendBtnSuccess"
							list-type="picture"
						>
							<el-image :src="formData.campaignSmallSendBtnUrl" class="avatar" v-if="formData.campaignSmallSendBtnUrl" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							<el-input class="inputs none imgArea"></el-input>
						</el-upload>
					</el-form-item>
					<el-form-item label="分享按钮" prop="campaignSharePosterBtnUrl" verify>
						<el-upload
							:action="uploadUrl"
							:data="access_token"
							:show-file-list="false"
							:before-upload="beforeUpload"
							:on-success="uploadSharePosterBtnSuccess"
							list-type="picture"
						>
							<el-image :src="formData.campaignSharePosterBtnUrl" class="avatar" v-if="formData.campaignSharePosterBtnUrl" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							<el-input class="inputs none imgArea"></el-input>
						</el-upload>
					</el-form-item>

					<el-form-item label="活动奖品区图" prop="campaignAwardAreaImageUrl" verify>
						<el-upload
							:action="uploadUrl"
							:data="access_token"
							:show-file-list="false"
							:before-upload="beforeUpload"
							:on-success="uploadAwardAreaImageSuccess"
							list-type="picture"
						>
							<el-image :src="formData.campaignAwardAreaImageUrl" class="avatar" v-if="formData.campaignAwardAreaImageUrl" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							<el-input class="inputs none imgArea"></el-input>
						</el-upload>
					</el-form-item>
				</div>
				<div class="flex_1">
					<el-form-item label="兑换按钮" prop="campaignConvertBtnUrl" verify>
						<el-upload
							:action="uploadUrl"
							:data="access_token"
							:show-file-list="false"
							:before-upload="beforeUpload"
							:on-success="uploadConvertBtnSuccess"
							list-type="picture"
						>
							<el-image :src="formData.campaignConvertBtnUrl" class="avatar" v-if="formData.campaignConvertBtnUrl" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							<el-input class="inputs none imgArea"></el-input>
						</el-upload>
					</el-form-item>

					<el-form-item label="兑换完按钮" prop="campaignConvertOverBtnUrl" verify>
						<el-upload
							:action="uploadUrl"
							:data="access_token"
							:show-file-list="false"
							:before-upload="beforeUpload"
							:on-success="uploadConvertOverBtnSuccess"
							list-type="picture"
						>
							<el-image :src="formData.campaignConvertOverBtnUrl" class="avatar" v-if="formData.campaignConvertOverBtnUrl" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							<el-input class="inputs none imgArea"></el-input>
						</el-upload>
					</el-form-item>
					
					<el-form-item label="排行榜预热区图" prop="campaignRankAreaPreUrl" verify>
						<el-upload
							:action="uploadUrl"
							:data="access_token"
							:show-file-list="false"
							:before-upload="beforeUpload"
							:on-success="uploadRankAreaPreSuccess"
							list-type="picture"
						>
							<el-image :src="formData.campaignRankAreaPreUrl" class="avatar" v-if="formData.campaignRankAreaPreUrl" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							<el-input class="inputs none imgArea"></el-input>
						</el-upload>
					</el-form-item>
					<el-form-item label="排行榜区图" prop="campaignRankAreaUrl" verify>
						<el-upload
							:action="uploadUrl"
							:data="access_token"
							:show-file-list="false"
							:before-upload="beforeUpload"
							:on-success="uploadRankAreaSuccess"
							list-type="picture"
						>
							<el-image :src="formData.campaignRankAreaUrl" class="avatar" v-if="formData.campaignRankAreaUrl" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							<el-input class="inputs none imgArea"></el-input>
						</el-upload>
					</el-form-item>

					<el-form-item label="立即赠送大按钮" prop="campaignBigSendBtnUrl" verify>
						<el-upload
							:action="uploadUrl"
							:data="access_token"
							:show-file-list="false"
							:before-upload="beforeUpload"
							:on-success="uploadBigSendBtnSuccess"
							list-type="picture"
						>
							<el-image :src="formData.campaignBigSendBtnUrl" class="avatar" v-if="formData.campaignBigSendBtnUrl" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							<el-input class="inputs none imgArea"></el-input>
						</el-upload>
					</el-form-item>
					<el-form-item label="活动规则区" prop="campaignRuleAreaImageUrl" verify>
						<el-upload
							:action="uploadUrl"
							:data="access_token"
							:show-file-list="false"
							:before-upload="beforeUpload"
							:on-success="uploadRuleAreaImageSuccess"
							list-type="picture"
						>
							<el-image :src="formData.campaignRuleAreaImageUrl" class="avatar" v-if="formData.campaignRuleAreaImageUrl" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							<el-input class="inputs none imgArea"></el-input>
						</el-upload>
					</el-form-item>

					<el-form-item label="领取奖品区" prop="campaignGetAwardAreaUrl" verify>
						<el-upload
							:action="uploadUrl"
							:data="access_token"
							:show-file-list="false"
							:before-upload="beforeUpload"
							:on-success="uploadAwardAreaSuccess"
							list-type="picture"
						>
							<el-image :src="formData.campaignGetAwardAreaUrl" class="avatar" v-if="formData.campaignGetAwardAreaUrl" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							<el-input class="inputs none imgArea"></el-input>
						</el-upload>
					</el-form-item>
					<el-form-item label="填写获奖信息按钮" prop="campaignWriteGetAwardAreaBtnUrl" verify>
						<el-upload
							:action="uploadUrl"
							:data="access_token"
							:show-file-list="false"
							:before-upload="beforeUpload"
							:on-success="uploadAwardAreaBtnSuccess"
							list-type="picture"
						>
							<el-image :src="formData.campaignWriteGetAwardAreaBtnUrl" class="avatar" v-if="formData.campaignWriteGetAwardAreaBtnUrl" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							<el-input class="inputs none imgArea"></el-input>
						</el-upload>
					</el-form-item>
				</div>
			</div>
			<div class="footer flex-center">
				<el-button type="primary" @click="handlePost">确  认</el-button>
				<el-button @click="closeDialog">取  消</el-button>
				<el-button type="primary" @click="handlePreView">预  览</el-button>
			</div>
		</el-form>

	    <!-- 预览 -->
		<el-dialog
			title="预览"
			width="60%"
			:destroy-on-close="true"
			:visible.sync="openPreviewPage"
			append-to-body>
				<template-preview ref="preview" :transData="formData" @ClosePreviewPage="handleClose"></template-preview>
		</el-dialog>
    </div>
</template>

<script>
    import {
		templateAdd,
		templateEdit
    } from "@/api/table";

    import templatePreview from './preview.vue'
    export default {
        name: "TEMPLATE_ACTION",
        components: {
            templatePreview
        },
        props: {
            infoData: {
            	type: Object,
                default: {}
            }
		},
		watch: {
			infoData(newVal, oldVal) {
				this.formData = newVal.campaignTemplateUid ? newVal : {}
			}
		},
        data() {
            return {
                openPreviewPage: false, // 预览
				formData: {},
				showLoading: false,                
				access_token: {
                    access_token: this.$store.getters.token
                },
				uploadUrl: process.env[this.$base] + "/medias/image/upload",
            }
        },
      	methods: {
			updateData() {
				this.formData = { ...this.infoData }
			},
			handlePreView() {
				if (!this.formData.campaignMainImageUrl) {
					this.$message.error("请上传图片再预览 O(∩_∩)O~");
					return
				}
				
				this.openPreviewPage = true;
				// 同步数据
				this.$nextTick(() => {
					this.$refs.preview.updateData()
				})
			},
			handleClose() {
				this.openPreviewPage = false
			},
			// 图片上传前的钩子
			beforeUpload(file) {
				var type = "image/jpg,image/jpeg,image/png,image/gif";
				const isJPG = type.indexOf(file.type) != -1;
				const isLt1M = file.size / 1024 / 1024 < 1;

				if (!isJPG) {
					this.$message.error("上传图片只能是 JPG,JPEG,PNG,GIF 格式!");
				}
				if (!isLt1M) {
					this.$message.error("上传图片大小不能超过 1MB!");
				}
				return isJPG && isLt1M;
			},

			//上传之前格式和大小判断
			beforeAvatarUploadVideo(file) {
				const isLt100M = file.size / 1024 / 1024 < 100;
				if(!isLt100M) {
					this.$message.error("视频文件大小不能超过 100MB!");
				}
				return isLt100M
			},
			// 填写获奖信息按钮
			uploadAwardAreaBtnSuccess(response, file, fileList) {
				if (response.code == "200") {
					this.$set(this.formData, 'campaignWriteGetAwardAreaBtnUrl', response.data.fileUrl)
				}
			},
			// 领取奖品区
			uploadAwardAreaSuccess(response, file, fileList) {
				if (response.code == "200") {
					this.$set(this.formData, 'campaignGetAwardAreaUrl', response.data.fileUrl)
				}
			},
			// 活动规则区
			uploadRuleAreaImageSuccess(response, file, fileList) {
				if (response.code == "200") {
					this.$set(this.formData, 'campaignRuleAreaImageUrl', response.data.fileUrl)
				}
			},
			// 立即赠送大按钮
			uploadBigSendBtnSuccess(response, file, fileList) {
				if (response.code == "200") {
					this.$set(this.formData, 'campaignBigSendBtnUrl', response.data.fileUrl)
				}
			},
			// 排行榜区图
			uploadRankAreaSuccess(response, file, fileList) {
				if (response.code == "200") {
					this.$set(this.formData, 'campaignRankAreaUrl', response.data.fileUrl)
				}
			},
			// 排行榜预热图
			uploadRankAreaPreSuccess(response, file, fileList) {
				if (response.code == "200") {
					this.$set(this.formData, 'campaignRankAreaPreUrl', response.data.fileUrl)
				}
			},
			// 兑换完按钮
			uploadConvertOverBtnSuccess(response, file, fileList) {
				if (response.code == "200") {
					this.$set(this.formData, 'campaignConvertOverBtnUrl', response.data.fileUrl)
				}
			},
			// 兑换按钮
			uploadConvertBtnSuccess(response, file, fileList) {
				if (response.code == "200") {
					this.$set(this.formData, 'campaignConvertBtnUrl', response.data.fileUrl)
				}
			},
			// 活动奖品区图
			uploadAwardAreaImageSuccess(response, file, fileList) {
				if (response.code == "200") {
					this.$set(this.formData, 'campaignAwardAreaImageUrl', response.data.fileUrl)
				}
			},

			// 分享按钮
			uploadSharePosterBtnSuccess(response, file, fileList) {
				if (response.code == 200) {
					this.$set(this.formData, 'campaignSharePosterBtnUrl', response.data.fileUrl)
				}
			},

			// 立即赠送小按钮
			uploadSmallSendBtnSuccess(response, file, fileList) {
				if (response.code == 200) {
					this.$set(this.formData, 'campaignSmallSendBtnUrl', response.data.fileUrl)
				}
			},
			// 说明图
			uploadExplainImageSuccess(response, file, fileList) {
				if (response.code == 200) {
					this.$set(this.formData, 'campaignExplainImageUrl', response.data.fileUrl)
				}
			},

			// 我的奖品
			uploadMyAwardBtnSuccess(response, file, fileList) {
				if (response.code == 200) {
					this.$set(this.formData, 'campaignMyAwardBtnUrl', response.data.fileUrl)
				}
			},

			// 活动主图
			uploadMainImageSuccess(response, file, fileList) {
				if (response.code == 200) {
					this.$set(this.formData, 'campaignMainImageUrl', response.data.fileUrl)
				}
			},

			// 确认
			handlePost() {
				//如果cardId不为空，那就是修改
				this.$refs.actionform.validate((valid, e) => {
					if (valid) {
						this.showLoading = true;
						// 编辑
						if (this.formData.campaignTemplateUid) {
							templateEdit(this.formData).then(res => {
								if (res.data.isSuccessful !== "Y") {
									this.$message.error(res.data.message);
									return
								}
								this.$message({
									message: "编辑成功！",
									type: "success"
								});
								setTimeout(() => {
									this.closeDialog(true);
								}, 0);
							}).finally(() => {
								this.showLoading = false;
							});
							return
						}

						// 新增
						templateAdd(this.formData).then(res => {
							if (res.data.isSuccessful !== "Y") {
								this.$message.error(res.data.message);
								return
							}
							this.$message({
								message: "新增成功！",
								type: "success"
							});
							setTimeout(() => {
								this.closeDialog(true);
							}, 0);
						}).finally(() => {
							this.showLoading = false;
						});
					}
				})
			},
			closeDialog(refresh = false, type = ''){
				this.formData = {};
				this.$emit('func', {
					action: false,
					refresh,
					type
				})
			},

      		// 移除
			handleDel(data) {
				this.$confirm("移除操作, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
					this.dragTags = this.dragTags.filter(item => item.resourceFileUrlUid !== data.resourceFileUrlUid);
				}).catch(() => {
					this.$message({
						type: "info",
						message: "已取消移除"
					});
				});
			}
      	},
  	}
</script>
<style lang="scss" scoped>
	.formItem {
		width: 360px;
	}
</style>

